<template>
  <div class="my-home">
    <div class="home-search">
      <div class="location">
        <span class="address" @click="address">{{ cityname }}</span>
        <van-icon name="play" @click="address"/>
        <i class="line">|</i>
        <van-icon name="search" size="15" />
        <span class="qing-search">请输入小区或地址</span>
      </div>
    </div>
        <van-icon class="icon-wai" name="aim" color="#fff"/>
    <van-swipe class="my-swipe" :autoplay="3000" :height="212">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :border="false" class="icon">
      <van-grid-item icon="wap-home-o" text="整租" />
      <van-grid-item icon="friends-o" text="合租" />
      <van-grid-item icon="location-o" text="地图找房" />
      <van-grid-item icon="shop-o" text="去出租" @click="$router.push('/gorent')"/>
    </van-grid>
    <div class="group">
      <h3 class="group-title">
        租房小组
        <span class="more">更多</span>
      </h3>
    </div>
    <div class="more-next">
      <van-grid :gutter="10" direction="horizontal" :column-num="2">
        <van-grid-item icon="photo-o" text="家住回龙观归属的感觉" />
        <van-grid-item icon="photo-o" text="宜居四五环大都市生活" />
        <van-grid-item icon="photo-o" text="喧嚣三里屯繁华的背后" />
        <van-grid-item icon="photo-o" text="比邻十号线地铁心连心" />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cityname: '上海',
      images: [
        'http://liufusong.top:8080/img/swiper/1.png',
        'http://liufusong.top:8080/img/swiper/2.png',
        'http://liufusong.top:8080/img/swiper/3.png'
      ]
    }
  },
  created () {
    this.cityname = localStorage.getItem('cityname')
  },
  methods: {
    address () {
      this.$router.push('/citylist')
    }
  }
}
</script>

<style lang="less" scoped>
.my-home {
  background-color: #f6f5f6;
  position: relative;
  .home-search {
    position:absolute;
    width: 80%;
    margin-top: 25px;
    margin-left: 20px;
    background-color: #fff;
    height: 34px;
    line-height: 34px;
    z-index: 1;
    border-radius: 3px;
  .location {
    font-size: 14px;
    color: #333;
    .address {
      padding-left: 10px;
    }
  }
  .line {
    margin: 0 10px;
    color: #ddd;
  }
  .qing-search {
    font-size: 13px;
    color: #9c9FA1;
    margin-left: 10px;
  }
  }
  .icon-wai {
    position: fixed;
    top: 28px;
    right: 15px;
    font-size: 30px;
    z-index: 2;
  }
  .my-swipe {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .icon {
    color: #07c160;
    font-size: 40px;
  }
  .group {
    .group-title {
      position: relative;
      margin: 15px 0 15px 15px;
      font-size: 15px;
      .more {
        color: #787d82;
        position: absolute;
        right: 15px;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
  .more-next {
    padding-bottom: 10px;
  }
}
</style>
